<template>
  <div style="padding-bottom: 32px;">
    <div class="nameLabel">测试通过率</div>

    <div v-if="countList.length > 0">
      <ve-pie :data="chartData"
              :height="chartHeight"
              legend-position="bottom"
              :settings="{
                radius: screenW * 0.25,
                offsetY: screenW * 0.32,
              }"
              :colors="colors">
      </ve-pie>
    </div>
    <div v-else>
      <van-empty description="暂无数据"/>
    </div>

  </div>
</template>

<script>

  // import Vue from 'vue'
  import {Empty} from 'vant'
  // import VCharts from 'v-charts'
  //
  // Vue.use(VCharts)
  Vue.use(Empty)

  export default {
    name: "TestChart",
    props: {
      countList: {
        type: Object,
        default: []
      }
    },
    watch: {
      countList: function (val) {
        this.chartData.rows = val
      }
    },
    data() {
      this.colors = ["#1DA1F2", "#3ECFFA"]
      return {
        screenW: document.body.clientWidth,
        chartData: {
          columns: ['结果', '次数'],
          rows: this.countList
        }
      }
    },
    computed: {
      chartHeight() {

        return this.screenW * 0.72 + 'px'
      }
    }
  }
</script>

<style scoped>
  .nameLabel {
    font-size: 16px;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
</style>
